<template >
  <div>
    <modaltemplate>
      <template v-slot:changtai="slotProps">
        <div class="item-container">
          <div class="test2">{{ slotProps.menuitem }}</div>
          <boxrow :menuitem="slotProps.menuitem" />
          <!-- <div class="item">
            <div class="name">12345</div>
            <div class="bottom-container">
              <div class="info">
                <div class="title">今日</div>
                <div class="value-unit">12<span>起</span></div>
              </div>
              <div class="info">
                <div class="title">本周</div>
                <div class="value-unit">12<span>起</span></div>
              </div>
            </div>
          </div>-->
        </div>
      </template>
    </modaltemplate>
  </div>
</template>
<script lang="ts">
import modaltemplate from '@/components/hongkou/modalhongkou.vue'
import boxrow from '@/components/hongkou/boxrow.vue'
import { reactive } from 'vue'
export default {
  name: 'hongkou',
  components: {
    modaltemplate,
    boxrow
  },
  props: {
    menuitem: Array,
  },
  setup: (props) => {
    let data = {
      chengshizhisheng: [
        { title: '12345', items: [{ item: '今日', value: 74, unit: '起' }, { item: '本周', value: 1008, unit: '起' },] },
        { title: '119', items: [{ item: '今日', value: 6, unit: '起' }, { item: '本周', value: 28, unit: '起' },] },
        { title: '110', items: [{ item: '今日', value: 8, unit: '起' }, { item: '本周', value: 39, unit: '起' }] },
      ],
      chengshizhigan: [
        { title: '烟感', items: [{ item: '安装数', value: '39092', unit: '个' }, { item: '告警数', value: '110', unit: '个' }] },
        { title: '门磁', items: [{ item: '安装数', value: '6200', unit: '个' }, { item: '告警数', value: '243', unit: '个' }] },
        { title: '充电桩', items: [{ item: '安装数', value: '4700', unit: '个' }, { item: '告警数', value: '0', unit: '个' }] },
        { title: '电弧灭弧', items: [{ item: '安装数', value: '1501', unit: '个' }, { item: '告警数', value: '0', unit: '个' }] },
        { title: '人体活动探测', items: [{ item: '安装数', value: '1460', unit: '个' }, { item: '告警数', value: '0', unit: '个' }] },
        { title: '楼道堆物', items: [{ item: '安装数', value: '1374', unit: '个' }, { item: '告警数', value: '80', unit: '个' }] },
        { title: '垃圾漫溢', items: [{ item: '安装数', value: '949', unit: '个' }, { item: '告警数', value: '21', unit: '个' }] },
        { title: '巡更锚点', items: [{ item: '安装数', value: '892', unit: '个' }, { item: '告警数', value: '0', unit: '个' }] },
        { title: '水侵', items: [{ item: '安装数', value: '822', unit: '个' }, { item: '告警数', value: '32', unit: '个' }] },
        { title: '粪坑漫溢', items: [{ item: '安装数', value: '657', unit: '个' }, { item: '告警数', value: '0', unit: '个' }] },
        { title: '地磁', items: [{ item: '安装数', value: '638', unit: '个' }, { item: '告警数', value: '19', unit: '个' }] },
        { title: '执法记录仪', items: [{ item: '安装数', value: '310', unit: '个' }, { item: '告警数', value: '0', unit: '个' }] },
        { title: '智能调光面板灯', items: [{ item: '安装数', value: '288', unit: '个' }, { item: '告警数', value: '0', unit: '个' }] },
        { title: '温湿度', items: [{ item: '安装数', value: '240', unit: '个' }, { item: '告警数', value: '0', unit: '个' }] },
        { title: '智能面板灯', items: [{ item: '安装数', value: '236', unit: '个' }, { item: '告警数', value: '0', unit: '个' }] },
        { title: '巡更卡', items: [{ item: '安装数', value: '220', unit: '个' }, { item: '告警数', value: '0', unit: '个' }] },
        { title: '可燃气体', items: [{ item: '安装数', value: '220', unit: '个' }, { item: '告警数', value: '0', unit: '个' }] },
        { title: '电梯门体', items: [{ item: '安装数', value: '155', unit: '个' }, { item: '告警数', value: '0', unit: '个' }] },
        { title: '微信开门', items: [{ item: '安装数', value: '120', unit: '个' }, { item: '告警数', value: '0', unit: '个' }] },
        { title: '室外水压', items: [{ item: '安装数', value: '78', unit: '个' }, { item: '告警数', value: '0', unit: '个' }] },
        { title: '窗帘电机', items: [{ item: '安装数', value: '49', unit: '个' }, { item: '告警数', value: '0', unit: '个' }] },
        { title: '网关', items: [{ item: '安装数', value: '27', unit: '个' }, { item: '告警数', value: '0', unit: '个' }] },
        { title: 'PH值', items: [{ item: '安装数', value: '16', unit: '个' }, { item: '告警数', value: '0', unit: '个' }] },
        { title: '溶解氧', items: [{ item: '安装数', value: '16', unit: '个' }, { item: '告警数', value: '0', unit: '个' }] },
        { title: '室内水压', items: [{ item: '安装数', value: '15', unit: '个' }, { item: '告警数', value: '0', unit: '个' }] },
        { title: '人流统计', items: [{ item: '安装数', value: '10', unit: '个' }, { item: '告警数', value: '0', unit: '个' }] },
        { title: '倾角', items: [{ item: '安装数', value: '12', unit: '个' }, { item: '告警数', value: '0', unit: '个' }] },
      ],
      chengshizhiyan: [
        { title: '公安', items: [{ item: '安装', value: 8980, unit: '台' }, { item: '告警', value: 0, unit: '次' }] },
        { title: '综治', items: [{ item: '安装', value: 0, unit: '台' }, { item: '告警', value: 0, unit: '次' }] },
        { title: '社会面', items: [{ item: '安装', value: 301, unit: '台' }, { item: '告警', value: 0, unit: '次' }] },
        { title: '城运', items: [{ item: '安装', value: 1276, unit: '台' }, { item: '告警', value: 0, unit: '次' }] },
        { title: '住建委', items: [{ item: '安装', value: 42, unit: '台' }, { item: '告警', value: 0, unit: '次' }] },
        { title: '体育局', items: [{ item: '安装', value: 20, unit: '台' }, { item: '告警', value: 0, unit: '次' }] },
        { title: '宣传部', items: [{ item: '安装', value: 2, unit: '台' }, { item: '告警', value: 0, unit: '次' }] },
        { title: '卫健委', items: [{ item: '安装', value: 29, unit: '台' }, { item: '告警', value: 0, unit: '次' }] },
      ],
      chengshihuxi: [
        { title: '2020年环保投入', items: [{ item: '占全区总投入', value: '5.37', unit: '%' }] },
        { title: '小压站', items: [{ item: '', value: '72', unit: '个' }] },
        { title: '垃圾收集点', items: [{ item: '', value: '1870', unit: '个' }] },
        { title: '两网融合点', items: [{ item: '', value: '956', unit: '个' }] },
        { title: '公共厕所', items: [{ item: '', value: '73', unit: '个' }] },
        { title: '月垃圾清运量', items: [{ item: '', value: '59.89', unit: '万吨' }] },
        { title: '月建筑垃圾', items: [{ item: '', value: '41.27', unit: '万吨' }] },
        { title: '2021年AQI优良率', items: [{ item: '', value: '97.50', unit: '%' }] },
        { title: 'PM2.5', items: [{ item: '', value: '24', }] },
        { title: '河流污染现状', items: [{ item: '', value: '良好' }] },
        { title: '绿地总面积', items: [{ item: '', value: '426.12', unit: '公顷' }] },
        { title: '人均公共绿地面积', items: [{ item: '', value: '1.98', unit: '平方米/人' }] },
        { title: '2020年监测点噪声质量等级', items: [{ name: '昼间', value: '55.6', unit: 'db（A）' }, { name: '夜间', value: '48.4', unit: 'db（A）' }] },
        { title: '多层加装电梯立项', items: [{ item: '', value: '134', unit: '个' }] },
        { title: '美丽家园预期改造面积', items: [{ item: '', value: '79.86', unit: '万平方米' }] }
      ],
      chengshiwendu: [
        { title: '一网通办', items: [{ name: '今日', value: '324', unit: '起' }, { name: '本周', value: '14624', unit: '起' }] },
        { title: '公交覆盖率', items: [{ item: '', value: '94.15', unit: '%' }] },
        { title: '宾旅馆', items: [{ item: '', value: '176', unit: '个' }] },
        { title: '菜场', items: [{ item: '', value: '32', unit: '个' }] },
        { title: '超市', items: [{ item: '', value: '9', unit: '个' }] },
        { title: '公园', items: [{ item: '', value: '15', unit: '个' }] },
        { title: '学校', items: [{ item: '', value: '177', unit: '个' }] },
        { title: '养老设施', items: [{ item: '', value: '82', unit: '个' }] },
      ],
      chengshimaibo: [
        { title: '地面道路', items: [{ item: '拥堵', value: '57', unit: '条' }] },
        { title: '地面道路', items: [{ item: '堵塞', value: '6', unit: '条' }] },
        { title: '快速道路', items: [{ item: '拥堵', value: '6', unit: '条' }] },
        { title: '轨道交通', items: [{ item: '今日总客流', value: '259801', unit: '人' }] },
        { title: '共享单车总数', items: [{ item: '', value: '26357', unit: '辆' }] }
      ]
    }
  }
}

</script>
<style lang="less" scoped>
.item-container {
}
.item {
  height: 112px;
  width: 33%;
  box-sizing: border-box;
  color: #ffffff;
  text-align: center;
  // border-right: 2px solid rgba(7,48,74,0.47);
  border-bottom: 2px solid rgba(7, 48, 74, 0.47);
  display: inline-block;
}
.item:nth-child(1 + 3n) {
  height: 112px;
  width: 33%;
  box-sizing: border-box;
  color: #ffffff;
  text-align: center;
  display: inline-block;
  // border-right: 2px solid rgba(7,48,74,0.47);
  // border-bottom: 2px solid rgba(7,48,74,0.47);
  border: 2px solid rgba(7, 48, 74, 0.47);
  border-top: 0px;
}
.name {
  font-size: 20px;
  font-family: Microsoft YaHei Semibold, Microsoft YaHei Semibold-Semibold;
  font-weight: 600;
  line-height: 50px;
}
.bottom-container {
  display: flex;
  font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
  .info {
    flex: 1;
    .title {
      font-size: 14px;
      font-weight: 400;
    }
    .value-unit {
      font-size: 26px;
      font-weight: 700;
      color: #10f7ff;
      span {
        font-size: 12px;
        font-weight: normal;
      }
    }
  }
}
</style>